<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>Kỹ thuật lập trình Ajax , CĐ Ajax &amp; Web 2.0 , Chuyên đề</title>







<link rel="shortcut icon" href="http://www.giaiphaptructuyen.net/news/templates/images/facico.ico" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Kỹ thuật lập trình Ajax ,  , CĐ  Ajax &amp; Web 2.0 , Chuyên đề ">
<meta name="keywords" content=" Kỹ thuật lập trình Ajax ,  , CĐ  Ajax &amp; Web 2.0 , Chuyên đề ">
<meta name="author" content="HUYNH VAN MUOI - sangtaoco@yahoo.com">
<meta name="generator" content="Thiet ke website, quang cao truc tuyen">
<meta name="page-topic" content="iCMS group">
<meta name="copyright" content="iCMS  V1.0.6 @2000-2010 by HUYNH VAN  MUOI">
<meta name="resource-Type" content="Document">
<meta name="distribution" content="Global">

<meta name="revisit-After" content="1 days">
<meta name="robots" content="index,follow">
<meta name="rating" content="general">
<meta name="doc-type" content="web page">
<meta name="pics-label" content="G">
<meta name="robots" content="ALL">
<meta name="reply-to" content="contact@giaiphaptructuyen.net">
<meta name="Classification" content="Website solution and Marketing online">

<link rel="stylesheet" href="index.php_files/style.htm" type="text/css">

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
body,td,th {
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
}
.style1 {
	color: #FFFFFF;
	font-weight: bold;
}
.style3 {font-size: 10}
.style6 {font-size: 14}
.a_G_N_menu:active {  color: #000000; text-decoration: none}
.a_G_N_menu:link {    color: #000000; text-decoration: none} 
.a_G_N_menu:visited { color: #000000;  text-decoration: none}
.a_G_N_menu:hover {  color: #44B787;  text-decoration: none}

a:active {  color: #000000; text-decoration: none}
a:link {    color: #44B787; text-decoration: none} 
a:visited { color: #7C7C7C;  text-decoration: none}
a:hover {  color: #000000;  text-decoration: none}

-->

</style>
<style type="text/css">
<!--
.style_menu {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #666666;
}
-->
</style></head><body>	
  <a name="top"></a>  
	<div class="style5" id="waitDiv" style="position: absolute; left: 40%; top: 50%; visibility: hidden; text-align: center;">
		<table class="waitbox" summary="">
		<tbody><tr>
		<td align="center"><b><big>Loading...</big></b><br>
		<img src="index.php_files/indicator.gif" alt="">

		<br>Please Wait.</td></tr>
		</tbody></table>	
	</div>
	
	<script type="text/javascript">	
	<!--
		toggle_visibility('waitDiv', 1);
	//-->
	</script>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="780">
            <tbody><tr>
              <td height="80" width="24%"><a href="http://www.giaiphaptructuyen.net/news/index.php"> </a>
                <form action="/news/index.php?news=search" method="post" enctype="multipart/form-data" name="frm_s" onsubmit="return kt_nember();">
                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody><tr>
                      <td valign="top" width="10%"><div align="right"><img src="index.php_files/b_search.png" height="16" width="16">&nbsp; </div></td>
                      <td width="90%"><input name="namesrh" value="" size="18" style="padding: 0pt; font-size: 10pt; font-family: Verdana;" type="text">
                          <br>
                          <select name="dkchon" style="border: 1px solid rgb(0, 128, 0); padding: 0pt; width: 110px; font-size: 9pt; font-family: Verdana;">
                            <option value="1">Tiêu đề tin</option>
                            <option value="2">Nội dung tin</option>
                          </select>
                          <input name="submitsrh" value="&gt;&gt;" style="font-size: 8pt; font-family: Verdana;" type="submit">
&nbsp;</td>
                    </tr>
                    <tr>
                      <td colspan="2">&nbsp;</td>
                    </tr>
                    <tr>
                      <td colspan="2" align="center"><script language="javascript1.2" src="index.php_files/datevn.htm"> </script></td>
                    </tr>
                  </tbody></table>
              </form>                 </td>
              <td width="55%"><div align="center">
              </div></td>
              <td width="21%"><a href="http://www.giaiphaptructuyen.net/news/index.php"><img src="index.php_files/logo.gif" border="0" height="90" width="155"></a></td>
            </tr>
</tbody></table>

<a href="http://www.giaiphaptructuyen.net/news/index.php?s=cus" class="a_G_N_menu" title="Lien he &amp;  Gop y"></a>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="780">
  <tbody><tr background="index.php_files/d3.htm" bgcolor="#00923f">
    <td background="index.php_files/d3.gif" height="37"><a href="http://www.giaiphaptructuyen.net/news/index.php" title="Home &amp; Trang chu" class="a_G_N_menu"><img src="index.php_files/b_home.png" align="absbottom" border="0" height="16" width="16"></a><a href="http://www.giaiphaptructuyen.net/news/index.php" class="a_G_N_menu"> <strong>Trang chủ</strong></a>&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?s=cus" class="a_G_N_menu" title="Lien he &amp;  Gop y"><img src="index.php_files/s_theme.png" align="absmiddle" border="0" height="16" width="16"> <strong>Liên hệ </strong></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" title="Dang bai viet" target="_blank" class="a_G_N_menu"><img src="index.php_files/b_tblops.png" align="absmiddle" border="0" height="16" width="16"> <strong>Đăng tin </strong></a> </td>
  </tr>
</tbody></table>
<table align="center" bgcolor="#71b390" border="0" cellpadding="0" cellspacing="1" width="780">
  <tbody><tr>
    <td bgcolor="#ffffff" valign="top" width="162">
	

<table cellpadding="0" cellspacing="0" width="100%">
<tbody><tr><td>
&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=menu&amp;m=30" class="a_G_N_menu" target="_top"><b>Quảng cáo trực tuyến  </b></a><br>  &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=30&amp;g=19" class="a_G_N_menu" target="_top">Thương mại điện tử</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=30&amp;g=21" class="a_G_N_menu" target="_top">Thanh toán điện tử</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=30&amp;g=22" class="a_G_N_menu" target="_top">Tiếp thị trực tuyến</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=30&amp;g=29" class="a_G_N_menu" target="_top">Bán hàng trực tuyến</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=30&amp;g=48" class="a_G_N_menu" target="_top">Thương hiệu trực tuyến</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=30&amp;g=36" class="a_G_N_menu" target="_top">Tiếp thị thư điện tử</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=30&amp;g=35" class="a_G_N_menu" target="_top">Chuyện tình Email</a> <br>&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=menu&amp;m=31" class="a_G_N_menu" target="_top"><b>Hosting  </b></a><br>  &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=31&amp;g=23" class="a_G_N_menu" target="_top">Thông tin</a> <br>&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=menu&amp;m=28" class="a_G_N_menu" target="_top"><b>Website  </b></a><br>  &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=28&amp;g=44" class="a_G_N_menu" target="_top">Quảng bá website</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=28&amp;g=54" class="a_G_N_menu" target="_top">Tối ưu hóa tìm kiếm</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=28&amp;g=37" class="a_G_N_menu" target="_top">Xây dựng Website</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=28&amp;g=39" class="a_G_N_menu" target="_top">Website và  hơn thế</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=28&amp;g=38" class="a_G_N_menu" target="_top">Bảo vệ website</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=28&amp;g=24" class="a_G_N_menu" target="_top">Domain - Tên miền</a> <br>&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=menu&amp;m=29" class="a_G_N_menu" target="_top"><b>Chuyên đề  </b></a><br>  &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=29&amp;g=49" class="a_G_N_menu" target="_top">CRM quản lý khách hàng</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=29&amp;g=46" class="a_G_N_menu" target="_top">CĐ  Ajax &amp; Web 2.0</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=29&amp;g=11" class="a_G_N_menu" target="_top">Office - Văn phòng</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=29&amp;g=14" class="a_G_N_menu" target="_top">Công nghệ mạng</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=29&amp;g=47" class="a_G_N_menu" target="_top">Chuyên đề RSS</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=29&amp;g=2" class="a_G_N_menu" target="_top">Phần mềm - Software</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=29&amp;g=45" class="a_G_N_menu" target="_top">CĐ Blog &amp; Podcast</a> <br>&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=menu&amp;m=27" class="a_G_N_menu" target="_top"><b>Tin tức - Sự kiện  </b></a><br>  &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=27&amp;g=27" class="a_G_N_menu" target="_top">Hành trình doanh nhân</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=27&amp;g=4" class="a_G_N_menu" target="_top">Bản tin Virus</a> <br> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=27&amp;g=5" class="a_G_N_menu" target="_top">Tin tức - sự kiện</a> <br>
</td>
</tr></tbody></table>
	<br>
		</td>
    <td bgcolor="#ffffff" height="400" valign="top">
	

		<table align="right" border="0" cellpadding="0" cellspacing="0" width="99%">
		  <tbody><tr>
			<td align="right" width="76%"><b> Kỹ thuật lập trình Ajax</b> </td>
			<td rowspan="3" background="index.php_files/line.gif" width="1%"><img src="index.php_files/line.gif" height="10" width="5"></td>
			<td bgcolor="#f5f5f5" width="1%">&nbsp;</td>
			<td bgcolor="#f5f5f5" width="22%"><div align="right">Nhà tài trợ </div></td>
		  </tr>
		  		  <tr>
		    <td><hr color="#cccccc" size="1"></td>
		    <td colspan="2" bgcolor="#f5f5f5">
	        <hr color="#cccccc" size="1"></td>
          </tr>
		  <tr>
			<td valign="top">	
		<div>

<p align="justify"><strong>Tác giả:</strong> Phạm Công Định</p><p align="justify"><img src="index.php_files/images.htm" align="left" border="0" hspace="5" vspace="5"><font face="Arial" size="2">AJAX là một trong những
từ ngữ thời thượng bậc nhất hiện nay trong giới công nghệ thông tin và
là bí quyết kĩ thuật đứng đằng sau các ứng dụng lớn thuộc Google:
Flickr, GMail, Google Suggest, Google Maps. Mặc dù cái tên này mới xuất
hiện được vài tháng, InfoWorld số tháng 5/2005 đã đưa ra nhận định:
Ajax đang tạo nên cuộc cách mạng trong thế giới web. <br><strong><br><font color="#407f00">AJAX LÀ GÌ?</font> <br></strong><br>JavaScript,
ngôn ngữ lập trình chạy trên trình duyệt đã quá quen thuộc với thế giới
web kể từ khi Netscape phát minh ra nó. Sự phát triển của công nghệ và
nhu cầu người sử dụng ngày càng cao buộc các nhà phát triển tạo ra một
kĩ thuật khác cho phép xử lý các tác vụ phức tạp hơn. Tháng 2/2005,
trên Internet bắt đầu lan truyền thuật ngữ Ajax như là một kỹ thuật mới
cho ứng dụng web. Những thành công vang dội và sự hấp dẫn kì lạ của
Gmail, Google Suggest và Google Maps đã khiến cho Ajax được chú ý một
cách đặc biệt.<br><br>Ajax là viết tắt của Asynchronous JavaScript and
XML - kỹ thuật kết hợp hai tính năng mạnh của JavaScript được các nhà
phát triển đánh giá rất cao: <br><br>• Gửi yêu cầu (request) đến máy chủ mà không cần nạp lại trang<br><br>• Phân tách và làm việc với XML<br><br>Các
ứng dụng Ajax xoay quanh một tính năng có tên là XMLHttpRequest. Các kĩ
sư của dự án Mozilla bắt đầu hỗ trợ tính năng này ở bản Mozilla 1.0 (và
Netscape 7). Apple cũng đã thực hiện một tính năng tương tự kể từ
Safari 1.2.<br><br>Ajax là sự phối hợp một loạt các công nghệ đang thu hút sự quan tâm của giới công nghiệp trong thời gian gần đây. Đó là:<br><br>•
Trình bày trang web dựa trên XHTML và CSS, các chuẩn của W3C, được
Firefox (Mozilla), Safari (Apple), Opera, Netscape 8.0 (nhân Firefox)
hỗ trợ rất tốt;<br><br>• Biểu diễn động và tương tác sử dụng Document Object Model, chuẩn của W3C;<br><br>• Trao đổi và xử lý dữ liệu dùng XML và XSLT, chuẩn của W3C;<br><br>• Thu hồi dữ liệu bất đối xứng dùng XMLHttpRequest;<br><br>•
Dùng JavaScript để liên kết mọi thứ lại với nhau. JavaScript ở đây là
ECMAScript, chuẩn của ECMA, không phải là JScript của Microsoft. <br><br>Ở
các ứng dụng web truyền thống, client sẽ gửi HTTP Request đến web
server và web server sẽ gửi trả response chứa các thông tin dưới dạng
HTML và CSS. Ajax cho phép tạo ra một Ajax Engine nằm giữa giao tiếp
này. Khi đó, các yêu cầu gửi resquest và nhận response do Ajax Engine
thực hiện. Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho
trình duyệt, web server có thể gửi trả dữ liệu dạng XML và Ajax Engine
sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML+CSS cho trình duyệt
hiển thị. Việc này được thực hiện trên client nên giảm tải rất nhiều
cho server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển
thị tức thì mà không cần nạp lại trang. Mặt khác, sự kết hợp của các
công nghệ web như CSS và XHTML làm cho việc trình bày giao diện trang
web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp. Đây là
những lợi ích hết sức thiết thực mà Ajax đem lại.<br><br><strong><font color="#407f00">LẬP TRÌNH AJAX</font><br></strong><br><strong><font color="#0060bf">Xử lý HTTP Request</font> </strong><br><br>Để
gửi một HTTP Request đến server bằng JavaScript, bạn cần tạo một đối
tượng của lớp cung cấp tính năng này. Trong IE thì lớp này tồn tại dưới
dạng một đối tượng ActiveX có tên là XMLHTTP. Đối tượng này có từ IE
4.0. <br>var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");<br><br>Nếu MSXML được cài đặt thì bạn cũng có thể gọi: <br><br>var httpRequest = new ActiveXObject("Msxml2.XMLHTTP");<br><br>Ở
Mozilla, Firefox, Opera 8.0, Safari và các trình duyệt khác thì lớp này
có tên là XMLHttpRequest. Đối tượng XMLHttpRequest không phải là một
chuẩn của W3C (tương lai có thể được W3C chấp thuận). Đối tượng
XMLHttpRequest được hỗ trợ ở IE 5.0+, Safari 1.2+, Mozilla 1.0+/
Firefox, Opera 8.0+ và Netscape 7+.<br>var httpRequest = new XMLHttpRequest();<br><br>Do sự khác biệt này, nên để ứng dụng của bạn chạy trên nhiều trình duyệt thì bạn có thể làm như sau:<br><br>if (window.XMLHttpRequest) { // Mozilla, Safari, ...<br><br>httpRequest = new XMLHttpRequest();<br><br>} else if (window.ActiveXObject) { // IE<br><br>httpRequest = new ActiveXObject("Microsoft.XMLHTTP");<br><br>}<br><br>Do
ActiveX trên IE rất nguy hiểm cho người dùng nên nhiều trường hợp tính
năng này được mặc định cấm, vì vậy bạn cần kiểm tra trình duyệt của
người sử dụng trước khi gọi đối tượng XMLHTTP. Việc kiểm tra này được
thực hiện qua giá trị của window.ActiveXObject. Ví dụ:<br><br>if (window.ActiveXObject) {<br><br>xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") <br><br>} <br><br>else { ...} <br><br>Một
số phiên bản của trình duyệt Mozilla không làm việc đúng khi nhận đáp
trả từ server không có header chứa XML mime-type. Để khắc phục vấn đề
này, bạn có thể sử dụng phương thức định nghĩa lại phần header do
server gửi đến trong trường hợp nó không phải là text/xml.<br><br>httpRequest = new XMLHttpRequest();<br><br>httpRequest.overrideMimeType(text/xml);<br><br>Tiếp
theo, bạn cần xác định muốn làm gì sau khi nhận được đáp trả (response)
từ server. Giai đoạn này, bạn chỉ cần báo cho đối tượng HTTP request
biết hàm JavaScript sẽ làm công việc xử lý đáp trả. Điều này được thực
hiện bằng cách thiết lập thuộc tính onreadystatechange của đối tượng
thành tên của hàm JavaScript:<br><br>httpRequest.onreadystatechange = nameOfTheFunction; <br><br>Chú
ý không dùng cặp ngoặc đơn () sau tên hàm và không truyền tham số vào
hàm đó. Thêm nữa, thay vì trao tên hàm thì bạn có thể sử dụng kĩ thuật
định nghĩa hàm động:<br><br>httpRequest.onreadystatechange = function() {<br><br>// do the thing<br><br>};<br><br>Sau
khi đã khai báo những gì sẽ diễn ra lúc nhận được response, bạn tiến
hành gửi request. Bạn cần gọi các phương thức open() và send() của lớp
HTTP request:<br><br>httpRequest.open(GET, <a href="http://www.example.org/some.file,%20true">http://www.example.org/some.file, true</a>);<br><br>httpRequest.send(null);<br><br>Tham
số đầu tiên của lời gọi đến open() là phương thức HTTP Request – GET,
POST, HEAD hay bất cứ phương thức nào mà bạn muốn sử dụng và phương
thức đó cần được server hỗ trợ. Chú ý viết hoa theo quy định của chuẩn
HTTP, nếu không thì một số trình duyệt như Firefox có thể không xử lý
request. <br><br>Tham số thứ hai là địa chỉ URL của trang mà bạn gửi
request đến. Do thiết lập bảo mật, bạn không thể gọi các trang trên tên
miền của bên thứ ba. Chú ý là nếu bạn không gọi đúng tên miền trên tất
cả các trang thì bạn sẽ nhận được thông báo permission denied khi gọi
open(). <br><br>Tham số thứ ba xác lập request có bất đối xứng hay
không (asynchronous). Nếu TRUE, thì việc thực thi hàm JavaScript sẽ
tiếp tục trong khi response của server chưa đến. Đây là chữ A trong
AJAX. <br><br>Tham số gửi đến phương thức send() có thể là bất cứ dữ
liệu nào mà bạn muốn gửi tới server nếu bạn dùng phương thức POST để
gửi request. Dữ liệu sẽ có dạng của một chuỗi truy vấn: <br><br>name=value&amp;anothername=othervalue&amp;so=on<br><br>Đối
tượng XMLHttpRequest có một tập các thuộc tính dùng chung trên tất cả
các môi trường hỗ trợ. Dưới đây là danh sách các thuộc tính chủ yếu của
đối tượng này.<br><br><strong><font color="#0060bf">Xử lý Server Response</font> </strong><br><br>Chú ý khi gửi request, bạn cung cấp tên của hàm JavaScript được thiết kế để xử lý response.<br><br>httpRequest.onreadystatechange = nameOfTheFunction; <br><br>Hãy
xem hàm này nên làm gì. Đầu tiên, hàm cần kiểm tra trạng thái của
request. Nếu trạng thái có giá trị là 4, nghĩa là ứng dụng của bạn đã
nhận được response đầy đủ từ server và đó là dấu hiệu tốt để bạn tiếp
tục xử lý nó.<br><br>if (httpRequest.readyState == 4) {<br><br>// không xảy ra vấn đề gì và bạn đã nhận được response <br><br>} else {<br><br>// chưa sẵn sàng<br><br>}<br><br>Tiếp
theo cần kiểm tra mã trạng thái của HTTP server response. Tất cả các mã
có thể thàm khảo ở site của W3C. Trong bài viết này, chúng ta quan tâm
đến response 200 (OK).<br><br>if (httpRequest.status == 200) {<br><br>// trạng thái response trả lại dấu hiệu tốt!<br><br>} else {<br><br>// có vấn đề trong việc tiếp nhận và xử lý request,<br><br>// ví dụ 404 (Not Found)<br><br>// hay 500 (Internal Server Error) <br><br>}<br><br>Sau
khi đã kiểm tra trạng thái của request và mã trạng thái của HTTP
response, việc xử lý dữ liệu mà server gửi tới tùy ở bạn. Bạn có hai
lựa chọn:<br><br>• httpRequest.responseText – trả lại dưới dạng chuỗi văn bản <br><br>• httpRequest.responseXML – trả lại dưới dạng đối tượng XMLDocument và bạn có thể duyệt bằng cách sử dụng các hàm JavaScript DOM<br><br><strong><font color="#0060bf">Ví dụ với Text Response</font> </strong><br><br>Chúng
ta sẽ xây dựng một ví dụ đơn giản. Các mã JavaScript gửi request đến
một trang HTML, test.html. Trang này chứa dòng "Im a test", sau đó
chúng ta dùng alert() để gửi ra nội dung của file đó.<br><br>
<br><br>var httpRequest = false; //Ban đầu chưa có request<br><br>function makeRequest(url) {<br><br>httpRequest = false;<br><br>if (window.XMLHttpRequest) { // Kiểm tra hỗ trợ đối tượng XMLHttpRequest trên Mozilla, Safari,...<br><br>httpRequest = new XMLHttpRequest();<br><br>if (httpRequest.overrideMimeType) {<br><br>httpRequest.overrideMimeType(text/xml);<br><br>}<br><br>} else if (window.ActiveXObject) { // Trên IE, kiểm tra xem ActiveX có bị disable<br><br>try {<br><br>httpRequest = new ActiveXObject("Msxml2.XMLHTTP");<br><br>} catch (e) {<br><br>try {<br><br>httpRequest = new ActiveXObject("Microsoft.XMLHTTP");<br><br>} catch (e) {<br><br>//Xử lý khác của bạn<br><br>}<br><br>}<br><br>}<br><br>if (!httpRequest) {<br><br>alert(Giving up :( Cannot create an XMLHTTP instance);<br><br>return false;<br><br>}<br><br>httpRequest.onreadystatechange = alertContents;<br><br>httpRequest.open(GET, url, true);<br><br>httpRequest.send(null);<br><br>}<br><br>function alertContents() {<br><br>if (httpRequest.readyState == 4) {<br><br>if (httpRequest.status == 200) {<br><br>alert(httpRequest.responseText);<br><br>} else {<br><br>alert(There was a problem with the request.);<br><br>}<br><br>}<br><br>}<br><br>
<br><br><br><br>style="cursor: pointer; text-decoration: underline"<br><br>onclick="makeRequest(test.html)"&gt;<br><br><!-- Thông điệp của bạn ở đây --><br><br><br><br>Trong
ví dụ này, người dùng kích chuột vào liên kết "Make a request" trên
trình duyệt, việc này sẽ gọi hàm makeRequest() cùng với một tham số –
cái tên test.html của file HTML trong cùng thư mục. Sau đó request được
thực hiện. <br><br>Tiếp theo, bạn xác định hàm alertContents() sẽ xử
lý trường hợp onreadystatechange. alertContents() kiểm tra xem response
đã nhận được hay chưa và nếu OK thì nó sẽ thực thi alert() để gửi ra
nội dung của file test.html.<br><br><strong><font color="#0060bf">Ví dụ với XML Response</font> <br></strong><br>Ví
dụ vừa khảo sát minh họa cho cách dùng thuộc tính reponseText của đối
tượng request. Ví dụ dưới đây sẽ minh họa cho thuộc tính responseXML.<br><br>Việc đầu tiên là chuẩn bị trang XML sẽ được dùng cho request về sau. Trang dưới có tên là test.xml:</font></p>
<table align="right" border="0" cellpadding="0" height="238" width="310">

<tbody><tr>
<td height="238" width="310">
<p align="justify">
</p><table border="0">

<tbody><tr>
<td><img src="index.php_files/A0512_UD_126.jpg" border="0"></td></tr></tbody></table></td></tr></tbody></table>
<p align="justify"><font face="Arial" size="2"><br><br><br><br>Im a test.<br><br><br><br>Trong dòng mã của ví dụ trên chúng ta chỉ cần thay dòng request bằng:<br><br>...<br><br>onclick="makeRequest(test.xml)"&gt;<br><br>...<br><br>Sau đó trong alertContents() chúng ta cần thay dòng alert(httpRequest.responseText); với:<br><br>var xmldoc = httpRequest.responseXML;<br><br>var root_node = xmldoc.getElementsByTagName(root).item(0);<br><br>alert(root_node.firstChild.data);<br><br>responseXML
lấy giúp chúng ta đối tượng XMLDocument và chúng ta sẽ dùng các phương
thức DOM để truy cập một số dữ liệu có trong trang XML. <br><br>Mã nguồn ví dụ có thể tải về ở website TGVT, bạn cũng có thể chạy trực tiếp tại http://goldenkey.edu.vn/ajax. </font></p>
<table style="border-collapse: collapse; border-right-width: 0px;" border="1" cellpadding="0" height="195" width="600">

<tbody><tr>
<td style="border-left: 1px solid; border-right: medium none;" height="39" width="8">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="39" width="138">
<p align="justify"><strong><font face="Arial" size="2">onreadystatechange</font></strong></p></td>
<td style="border-left: medium none;" height="39" width="6">&nbsp;</td>
<td style="border-right: medium none;" height="39" width="9">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="39" width="430">
<p align="justify"><font face="Arial" size="2">Bộ xử lý sự kiện cho một sự kiện phát sinh mỗi khi có sự thay đổi trạng thái.</font></p></td>
<td style="border-left: medium none;" height="39" width="5">&nbsp;</td></tr>
<tr>
<td style="border-left: 1px solid; border-right: medium none;" height="40" width="8">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="40" width="138">
<p align="justify"><strong><font face="Arial" size="2">readyState</font></strong></p></td>
<td style="border-left: medium none;" height="40" width="6">&nbsp;</td>
<td style="border-right: medium none;" height="40" width="9">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="40" width="430">
<p align="justify"><font face="Arial" size="2">Status: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete </font></p></td>
<td style="border-left: medium none;" height="40" width="5">&nbsp;</td></tr>
<tr>
<td style="border-left: 1px solid; border-right: medium none;" height="28" width="8">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="28" width="138">
<p align="justify"><strong><font face="Arial" size="2">responseText </font></strong></p></td>
<td style="border-left: medium none;" height="28" width="6">&nbsp;</td>
<td style="border-right: medium none;" height="28" width="9">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="28" width="430">
<p align="justify"><font face="Arial" size="2">Dữ liệu dạng String trả về từ server</font></p></td>
<td style="border-left: medium none;" height="28" width="5">&nbsp;</td></tr>
<tr>
<td style="border-left: 1px solid; border-right: medium none;" height="26" width="8">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="26" width="138">
<p align="justify"><strong><font face="Arial" size="2">responseXML</font></strong></p></td>
<td style="border-left: medium none;" height="26" width="6">&nbsp;</td>
<td style="border-right: medium none;" height="26" width="9">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="26" width="430">
<p align="justify"><font face="Arial" size="2">Đối tượng tài liệu tương thích DOM của dữ liệu trả về từ server </font></p></td>
<td style="border-left: medium none;" height="26" width="5">&nbsp;</td></tr>
<tr>
<td style="border-left: 1px solid; border-right: medium none;" height="38" width="8">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="38" width="138">
<p align="justify"><strong><font face="Arial" size="2">status </font></strong></p></td>
<td style="border-left: medium none;" height="38" width="6">&nbsp;</td>
<td style="border-right: medium none;" height="38" width="9">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="38" width="430">
<p align="justify"><font face="Arial" size="2">Mã trạng thái dạng số do server trả về, như 404 cho "Not Found" hay 200 cho "OK"</font></p></td>
<td style="border-left: medium none;" height="38" width="5">&nbsp;</td></tr>
<tr>
<td style="border-left: 1px solid; border-right: medium none;" height="29" width="8">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="29" width="138">
<p align="justify"><strong><font face="Arial" size="2">statusText </font></strong></p></td>
<td style="border-left: medium none;" height="29" width="6">&nbsp;</td>
<td style="border-right: medium none;" height="29" width="9">&nbsp;</td>
<td style="border-left: medium none; border-right: medium none;" height="29" width="430">
<p align="justify"><font face="Arial" size="2">Thông điệp dạng String message đi kèm với mã trạng thái. </font></p></td>
<td style="border-left: medium none;" height="29" width="5">&nbsp;</td></tr></tbody></table>
<p align="justify"><font face="Arial" size="2"><font color="#0060bf"><strong>Phạm Công Định<br>Trung tâm ngôn ngữ Golden Key</strong><br>--------------------------------<br><strong>Tài liệu tham khảo</strong><br>1. Tài liệu hội thảo Effective Ajax 8/2005 (Jim Halberg và Rob Sanheim)<br>2. Mã trạng thái HTTP: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html <br>3. DOM:</font> <a href="http://www.w3.org/DOM/">http://www.w3.org/DOM/</a></font></p>
				</div>        		<br> 
			<div align="right">Xem: 869 lần  <i>(  Tác giả  Pcworld.com.vn    </i> )</div>	</td>
			<td bgcolor="#f5f5f5">&nbsp;</td>
	        <td bgcolor="#f5f5f5" valign="top" width="22%">
				<div align="left">

					<a href="http://giaiphaptructuyen.net/" target="_blank" title="http://giaiphaptructuyen.net/">
					<img src="index.php_files/Website_icms156.jpg" border="0">
					</a>
				</div>

 <br>
			<div align="right">	.......<strong>Tin chọn lọc</strong></div> 
			<hr color="#cccccc" size="1">
          				
				</td>
		  </tr>
		  <tr>
		    <td valign="top">&nbsp;</td>
		    <td background="index.php_files/line.gif">&nbsp;</td>
		    <td bgcolor="#f5f5f5">&nbsp;</td>
		    <td bgcolor="#f5f5f5" valign="top">&nbsp;</td>
	      </tr>
		  <tr>
		    <td valign="top"><strong><u>&nbsp;Tin cùng CĐ  Ajax &amp; Web 2.0&nbsp;&nbsp;&nbsp;</u></strong> </td>
		    <td background="index.php_files/line.gif">&nbsp;</td>
		    <td bgcolor="#f5f5f5">&nbsp;</td>
		    <td bgcolor="#f5f5f5" valign="top">&nbsp;</td>
	      </tr>
		  <tr>
		    <td valign="top">
          <div align="left"><a href="http://www.giaiphaptructuyen.net/news/index.php?news=detail&amp;m=29&amp;g=46&amp;n=981" target="_top"> - Các ứng dụng AJAX có để lại lỗ hổng cho hacker tấn công? </a> </div><div align="left"><a href="http://www.giaiphaptructuyen.net/news/index.php?news=detail&amp;m=29&amp;g=46&amp;n=855" target="_top"> - Toàn cảnh Web 2.0 qua 8 định nghĩa </a> </div><div align="left"><a href="http://www.giaiphaptructuyen.net/news/index.php?news=detail&amp;m=29&amp;g=46&amp;n=767" target="_top"> - AJAX - Tương lai của ứng dụng Web ( phan 4) -&gt; Ví dụ minh họa &amp; cách áp dụng công nghệ AJAX (phan 2) </a> </div><div align="left"><a href="http://www.giaiphaptructuyen.net/news/index.php?news=detail&amp;m=29&amp;g=46&amp;n=766" target="_top"> - AJAX - Tương lai của ứng dụng Web ( phan 4) -&gt; Ví dụ minh họa &amp; cách áp dụng công nghệ AJAX </a> </div><div align="left"><a href="http://www.giaiphaptructuyen.net/news/index.php?news=detail&amp;m=29&amp;g=46&amp;n=765" target="_top"> - AJAX - Tương lai của ứng dụng Web ( phan 3 ) -&gt; AJAX  và  ứng dụng của nó </a> </div><div align="left"><a href="http://www.giaiphaptructuyen.net/news/index.php?news=detail&amp;m=29&amp;g=46&amp;n=764" target="_top"> - AJAX - Tương lai của ứng dụng Web ( phan 2) -&gt; AJAX - Ansynchronous JAvascripting and XML </a> </div><div align="left"><a href="http://www.giaiphaptructuyen.net/news/index.php?news=detail&amp;m=29&amp;g=46&amp;n=763" target="_top"> - AJAX - Tương lai của ứng dụng Web ( phan 1) </a> </div><div align="left"><a href="http://www.giaiphaptructuyen.net/news/index.php?news=detail&amp;m=29&amp;g=46&amp;n=762" target="_top"> - AJAX tương lai của ứng dụng Web </a> </div>			</td>
		    <td background="index.php_files/line.gif">&nbsp;</td>
		    <td bgcolor="#f5f5f5">&nbsp;</td>
		    <td bgcolor="#f5f5f5" valign="top">&nbsp;</td>
	      </tr>
		 <tr>
		    <td colspan="2"><hr color="#cccccc" size="1"></td>
		    <td colspan="2"> <hr color="#cccccc" size="1"></td>
          </tr>		  
		  <tr>
		    <td align="left" valign="top"><a href="http://www.giaiphaptructuyen.net/news/index.php?news=menu&amp;m=29" class="a_G_N_menu" target="_top">Website</a> &gt;&gt; <a href="http://www.giaiphaptructuyen.net/news/index.php?news=group&amp;m=29&amp;g=46" class="a_G_N_menu" target="_top">CĐ  Ajax &amp; Web 2.0</a></td>
		    <td bgcolor="#f5f5f5"></td>
		    <td bgcolor="#f5f5f5">&nbsp;</td>
		    <td bgcolor="#f5f5f5" valign="top">&nbsp;</td>
	      </tr>
</tbody></table>

          
	</td>
  </tr>
</tbody></table>
<table id="table1" align="center" bgcolor="#6eb18d" border="0" cellpadding="0" cellspacing="0" width="780">
  <tbody><tr background="index.php_files/d3.htm" bgcolor="#f4faff">
    <td colspan="3" background="index.php_files/d3.gif" height="25"><font color="#ffffcc">Software iNEWS V1.0.8</font><font color="#ffffff"> - Zoom: 800 x 600 - 1024 x 768</font>   </td>
  </tr>
  <tr>
    <td height="44" width="42%">
Visits:<b>244913 </b> User - 24h:<b> 0962 </b>Online</td>
    <td height="44" width="5%">&nbsp;</td>
    <td height="44" width="53%">
      <div align="right"><font color="#ffffff" size="1">Muoihv: 84 908 134 772 - Email:<a href="mailto:info@1yt.net"> info@1yt.net</a></font>      Copyright 2002 - 2007 by iCMS <font color="#ff0000"></font></div></td>
  </tr>
</tbody></table>

  <script type="text/javascript">
  <!--
  toggle_visibility('waitDiv', 0);
  //-->
  </script>		
</body></html>